<template>
  <div>
    地图<button @click="show">播放轨迹</button>
    <div id="container" style="width: 100%; height: 600px"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
let trackAni = ref()

let show = () => {
  trackAni.value.start()
}

onMounted(() => {
  //   var map = new BMapGL.Map('container')
  //   var point = new BMapGL.Point(116.404, 39.915)
  //   map.centerAndZoom(point, 15)
  //   // map.setMapType(BMAP_EARTH_MAP)
  //   var scaleCtrl = new BMapGL.ScaleControl() // 添加比例尺控件
  //   map.addControl(scaleCtrl)
  //   var zoomCtrl = new BMapGL.ZoomControl() // 添加缩放控件
  //   map.addControl(zoomCtrl)
  //   var cityCtrl = new BMapGL.CityListControl() // 添加城市列表控件
  //   map.addControl(cityCtrl)
  //   //   ef7ac358095605c88fca32541d577de1

  //   var polygon = new BMapGL.Polygon(
  //     [
  //       new BMapGL.Point(116.387112, 39.920977),
  //       new BMapGL.Point(116.385243, 39.913063),
  //       new BMapGL.Point(116.394226, 39.917988),
  //       new BMapGL.Point(116.401772, 39.921364),
  //       new BMapGL.Point(116.41248, 39.927893)
  //     ],
  //     { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 }
  //   )
  //   map.addOverlay(polygon)

  //   function createDOM(feature) {
  //     let btn = document.createElement('button')
  //     btn.innerHTML = '你好'
  //     return btn
  //   }
  //   const customOverlay = new BMapGL.CustomOverlay(createDOM, {
  //     point: new BMapGL.Point(116.40342230333138, 39.92498414216742),
  //     opacity: 0.5,
  //     map: map,
  //     offsetY: -10,
  //     properties: {
  //       title: 'this is a title',
  //       size: '100'
  //     }
  //   })
  //   // 将自定义覆盖物添加到地图上
  //   map.addOverlay(customOverlay)

  //   // 绑定鼠标事件
  //   customOverlay.addEventListener('click', function (e) {
  //     console.log('eeee', e)
  //   })
  var bmap = new BMapGL.Map('container') // 创建Map实例

  function getLatAndLng(address, city) {
    var myGeo = new BMapGL.Geocoder()
    // 将地址解析结果显示在地图上，并调整地图视野
    return new Promise((resolve) => {
      myGeo.getPoint(
        address,
        function (point) {
          if (point) {
            resolve(point)
          } else {
            alert('您选择的地址没有解析到结果！')
          }
        },
        city
      )
    })
  }
  function getLoaction() {
    return new Promise((resolve) => {
      var geolocation = new BMapGL.Geolocation()
      //获取定位信息
      geolocation.getCurrentPosition(
        function (r) {
          console.log(r)
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            var point = new BMapGL.Point(r.point.lng, r.point.lat) // 这里的point即为当前用户所在的坐标点
            resolve(point)
          } else {
            alert('无法定位到您的位置!')
          }
        },
        { enableHighAccuracy: true }
      )
    })
  }
  print()
  async function print() {
    let location = await getLoaction()

    console.log('定位信息', location)

   // let center = await getLatAndLng('光谷金融港一路', '武汉市')

    bmap.centerAndZoom(new BMapGL.Point(location.lng, location.lat), 17) // 初始化地图，设置中心点坐标和地图级别
    bmap.enableScrollWheelZoom(true)
    // var map = new BMapGL.Map('allmap')

    var walking = new BMapGL.WalkingRoute(bmap, {
      renderOptions: { map: bmap, autoViewport: true }
    })
    walking.search('金融港B18栋', '金融港青年公寓')

    var path = [] //路径坐标
    let path1 = await getLatAndLng('光谷金融港二路', '武汉市')
    path.push(path1)
    let path2 = await getLatAndLng('光谷金融港三路', '武汉市')
    path.push(path2)
    let path3 = await getLatAndLng('光谷金融港四路', '武汉市')
    path.push(path3)
    let path4 = await getLatAndLng('光谷火车站', '武汉市')
    path.push(path4)
    let path5 = await getLatAndLng('光谷地铁站', '武汉市')
    path.push(path5)
    var point = []
    for (var i = 0; i < path.length; i++) {
      point.push(new BMapGL.Point(path[i].lng, path[i].lat))
    }

    var pl = new BMapGL.Polyline(point)

    trackAni.value = new BMapGLLib.TrackAnimation(bmap, pl, {
      overallView: true, // 动画完成后自动调整视野到总览
      tilt: 30, // 轨迹播放的角度，默认为55
      duration: 20000, // 动画持续时长，默认为10000，单位ms
      delay: 3000 // 动画开始的延迟，默认0，单位ms
    })
  }

  //   map.setMapStyleV2({
  //     styleId: 'ef7ac358095605c88fca32541d577de1'
  //   })
})
</script>
